/*
 * @Author: yangrongxin
 * @Date: 2021-05-19 09:20:57
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-06-07 16:37:40
 */
import React from 'react';
import { View, Text, Image, Button } from '@tarojs/components';
import { AtModal, AtModalContent, AtIcon, AtModalAction } from 'taro-ui';
import styles from './index.module.less';

export enum MODAL_STATUS {
  ERROR = 'error',
  INFO = 'info',
}

interface ICustomModalProps {
  isOpened: boolean; // 当前是否开启的状态
  onClose: any; // 点击关闭弹窗执行事件
  title?: string; // 标题
  subTitle?: string; // 二级标题
  status?: MODAL_STATUS; // 弹窗状态
  btnGroup?: any; // 展示的按钮组
  bodyClassName?: any; // 外部注入的公共样式
}

const getHeaderImgFn = (status: MODAL_STATUS) =>
  `https://hxgywx.oss-cn-shenzhen.aliyuncs.com/nursing-customer/assets/custom_modal_${status}.png`;

const CustomModal = (props: ICustomModalProps) => {
  const { isOpened, onClose, title = '', subTitle = '', status = MODAL_STATUS.INFO, btnGroup, bodyClassName } = props;

  return (
    <AtModal className={styles.modalWapper} isOpened={isOpened} closeOnClickOverlay={false}>
      <AtModalContent>
        <View className={`${styles.contentWapper} ${bodyClassName}`}>
          <Image src={getHeaderImgFn(status)} />
          <View>
            <Text className={status === MODAL_STATUS.ERROR ? styles.errorTitle : ''}>{title}</Text>
            <Text>{subTitle}</Text>
          </View>
          {btnGroup || <Button onClick={onClose}>知道了</Button>}
        </View>
      </AtModalContent>
      <AtModalAction>
        <View className={styles.closeIcon} onClick={onClose}>
          <AtIcon prefixClass="icon" value="times-circle-fill" />
        </View>
      </AtModalAction>
    </AtModal>
  );
};

export default CustomModal;
